<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>排排惠数据中心</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="static/css/swiper.min.css">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/public.css">
    <script src="static/js/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 22
            });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({
                    fontSize: whei / 22
                })
            });
        });
    </script>
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="header-center fl">
                <div class="header-img">排排惠数据中心</div>
            </div>
        </div>

        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop">
                    <div class="title">APP用户量</div>
                    <div class="allnav flex" style="height: 2.52rem;margin-top:0.08rem;position: relative;">
                        <div class="bigCircular1">
                            <div class="num" style="color: #1CD1A1;font-weight: normal;font-size: 0.25rem;">8938</div>
                        </div>
                        <div class="ring">
                        </div>
                    </div>
                </div>
                <div class="left-cen rightTop border">
                    <div class="title">合作平台总收入统计</div>
                    <div id="chart1" class="allnav" style="height: 2.52rem;margin-top:0.08rem"></div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="title">平台提现统计</div>
                    <div id="chart2" class="allnav" style="height: 2.52rem;margin-top:0.08rem"></div>
                </div>
            </div>
            <div class="center-cen fl">
                <div class="Statistics flex">
                    <div>平台总交易量</div>
                    <div>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>8</span>
                        <span>4</span>
                        <span>7</span>
                        <span>5</span>
                        <span>2</span>
                        <span>1</span>
                    </div>
                    <div>笔</div>
                </div>
                <div class="Statistics">
                    <div>平台总交易额</div>
                    <div>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <span>8</span>
                        <span>4</span>
                        <span>7</span>
                        <span>5</span>
                        <span>2</span>
                        <span>1</span>
                    </div>
                    <div>元</div>
                </div>
                <div class="cen-top border">
                    <div class="top-bottom">
                        <div id="chart4" class="allnav" ></div>
                    </div>
                </div>
                <div class="cen-bottom">
                    <div class="flex circularGroup">
                        <div class="circularItem">
                            <div style="position: relative;">
                                <div class="circularBack">
                                    <div class="num" style="color: #28B0FF;border-color: #28B0FF;">8938</div>
                                </div>
                                <div class="semicircle" style="border-top-color: #28B0FF;border-left-color: #28B0FF;">
                                </div>
                                <!-- <div class="anmi1">
                                    <div class="before"></div>
                                    <div class="after"></div>
                                </div> -->
                            </div>
                            <div style="font-size: 0.2rem;text-align: center;" class="title1">日用户量</div>
                        </div>
                        <div class="circularItem">
                            <div style="position: relative;">
                                <div class="circularBack">
                                    <div class="num" style="color: #FFC05C;border-color: #FFC05C;">8938</div>
                                </div>
                                <div class="semicircle" style="border-top-color: #FFC05C;border-left-color: #FFC05C;">
                                </div>
                            </div>
                            <div style="font-size: 0.2rem;text-align: center;" class="title1">日平台交易量</div>
                        </div>
                        <div class="circularItem">
                            <div style="position: relative;">
                                <div class="circularBack">
                                    <div class="num" style="color: #E93CA7;border-color: #E93CA7;">8938</div>
                                </div>
                                <div class="semicircle" style="border-top-color: #E93CA7;border-left-color: #E93CA7;">
                                </div>
                            </div>
                            <div style="font-size: 0.2rem;text-align: center;" class="title1">日店铺入驻量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="title">店铺入驻总数</div>
                    <div class="allnav flex" style="height: 2.52rem;margin-top:0.08rem;position: relative;">
                        <div class="bigCircular">
                            <div class="smallCircular">
                                <div class="num">8938
                                    <canvas id="sineCanvas" style="border-radius: 50%;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-cen rightTop border">
                    <div class="title">运营中心数量及分布</div>
                    <div class="allnav" style="height: 2.52rem;margin-top:0.08rem;overflow: hidden;">
                        <div class="swiper-container" style="height: 2.3rem;margin-top:0.22rem;">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南1</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img src="./static/image/arrow-top.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南2</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img class="rotate"
                                                src="./static/image/arrow-bottom.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南3</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img src="./static/image/arrow-top.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南4</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img class="rotate"
                                                src="./static/image/arrow-bottom.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南5</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img src="./static/image/arrow-top.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南6</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img class="rotate"
                                                src="./static/image/arrow-bottom.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南7</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img src="./static/image/arrow-top.png" /> </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class=" flex province">
                                        <div>河南8</div>
                                        <div class="speed">
                                            <div class="percent"></div>
                                            <div class="back"></div>
                                        </div>
                                        <div class="flex">200家 <img class="rotate"
                                                src="./static/image/arrow-bottom.png" /> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="title">入驻店铺类型占比</div>
                    <div id="chart3" class="allnav" style="height: 2.52rem;margin-top:0.08rem"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="static/js/swiper.min.js"> </script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/china.js"></script>
    <script src="static/js/index.js"></script>
</body>
</html>